import TauActionPanel from '@/components/TauActionPanel';
import TauPage from '@/components/TauPage';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Button, Box, Icon } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { column } from './stores/definitions';
import { useHistory } from 'react-router';
import { useParams } from 'react-router-dom';
import moment from 'moment';

function Index() {
  const { roadStationStore: store } = useStore();

  const [state, setState] = useState([]);
  const [currentPage, setCurrentPage] = useState(0); // 默认页数
  const [pageSize, setPageSize] = useState(10); // 每页显示的数据数量
  const history = useHistory();
  const { id } = useParams();

  // 根据当前页码和每页数量获取当前页需要显示的数据
  const startIndex = currentPage * pageSize;
  const endIndex = startIndex + pageSize;
  const currentPageData = toJS(store.data).slice(startIndex, endIndex);

  const handleSearch = async (params) => {
    const { departureDate, ...searchArgs } = params.values;
    const res = await store.getRoute(id);
    setState(res);
    // eslint-disable-next-line require-atomic-updates
    store.search = {
      onStationId: res?.onStationId,
      offStationId: res?.offStationId,
      isReturn: '0',
      currency: 'RMB',
      ticketType: '0',
      departureDate: departureDate || moment().add('1', 'day').format('YYYY-MM-DD'),
      ...searchArgs,
    };
  };

  return (
    <TauPage className="page-container">
      <Box direction="row" align="center" margin={10}>
        <Button
          type="normal"
          onClick={() => {
            history.goBack();
          }}
          style={{ marginLeft: '-10px', border: 0 }}
        >
          <Icon
            type="arrow-left"
            style={{ padding: 6, border: '1px solid #ccc', borderRadius: '50%', color: 'var(--btn-pure-primary-bg)' }}
          />
        </Button>
        <div>{t`线路【(${state?.fromCityName}·${state?.onStationName}) ~ (${state?.toCityName}·${state?.offStationName})】的途径站点信息`}</div>
      </Box>
      <TauActionPanel
        className="action-panel"
        onSearch={handleSearch}
        searchItems={[
          {
            name: 'departureDate',
            type: 'datetime',
            props: {
              placeholder: t`请选择时间`,
              style: { width: 200 },
            },
          },
        ]}
      />
      <div className="content">
        <TauTable
          primaryKey="itemId"
          tableLayout="fixed"
          currentPage={currentPage}
          pageSize={pageSize}
          total={store.total}
          onFetch={({ page, size }) => {
            setCurrentPage(page);
            size && setPageSize(size);
          }}
          dataSource={currentPageData}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 77, cell: (v, i) => store.idx(pageSize, currentPage, i) },
            column('scheduleId', {}),
            column('companyName', {}),
            column('portName', {}),
            column('viaStationInfos', { width: '20vw' }),
            column('runTime', {}),
            column('shiftTime', {}),
          ]}
        />
      </div>
    </TauPage>
  );
}

export default observer(Index);
